<template>
    <el-dialog :title="title" :width='width' :visible='modalShow' :before-close='beforeClose' :fullscreen='fullscreen'>
        <!-- 使插槽内的组件触发生命周期 -->
        <slot v-if='modalShow'></slot>
        <div slot="footer">
            <el-button @click='cancel'>取消</el-button>
            <el-button class='theme-button' @click='modalConfirm'>确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    props:{
        show:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
            default:''
        },
        width:{
            type:String,
            default:'50%'
        },
        fullscreen:{
            type:Boolean,
            default:false
        },
        beforeClose:{
            type:Function,
            default:()=>{}
        }
    },
    name: 'modal',
    data() {
        return {
            modalShow:false
        }
    },
    watch:{
        show:{
            handler(nv,ov){
                console.log('nv:',nv);
                if (nv){
                    this.modalShow = nv
                }else{
                    this.modalShow = nv
                }
            }
        }
    },
    methods:{
        modalConfirm(){
            this.$emit('modalConfirm')
        },
        cancel() {
            this.$emit('cancel')
        },
    },
};
</script>
<style lang='less' scoped>

</style>
